:host ::ng-deep {
  .mat-icon.mat-icon-inline {
    width: 24px;
  }
  .mat-button-wrapper {
    // fix web builder editor
    p {
      margin: 0;
    }
  }
}

a,
.mdc-button {
  white-space: nowrap;
}

.mdc-button {
  ::ng-deep {
    .mdc-button__label {
      @apply flex items-center justify-center gap-1 leading-none;
    }
  }
}
.mdc-fab--mini {
  ::ng-deep {
    .mdc-button__label {
      display: flex;
    }
  }
}
.mdc-icon-button {
  &.mat-primary {
    --mat-icon-button-icon-color: var(--mat-sys-primary);
  }
}
::ng-deep {
  .mat-mdc-menu-content {
    .mat-mdc-menu-item {
      a.mat-mdc-button {
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: left;
        line-height: 48px;
        height: 48px;
        padding-left: 0;
        padding-right: 0;
        .mat-button-ripple {
          display: none;
        }
        &:hover {
          .mat-button-focus-overlay {
            opacity: 0;
          }
        }
      }
    }
  }
}

.pill {
  border-radius: 30px;
  padding-left: 20px;
  padding-right: 20px;
}

:host(.disabled) {
  @apply pointer-events-none;
}
